<template>
  <div>
    <div class="ac">
      <h1>home</h1>
      <img src="@/assets/logo.png" />
      <hello-world></hello-world>
    </div>

    <div class="page-button-group">
      <van-button type="default" @click="toast('不要用箭头函数，怪不得没法调用toast！！！')">默认按钮</van-button>
      <van-button type="primary" @click="indicator('强调！！！，不要用箭头函数')">主要按钮</van-button>
      <van-button type="warning" @click="loading">加载提示</van-button>
      <van-button type="danger" @click="confirm">危险，确认框</van-button>
    </div>
  </div>
</template>

<script>
import { Button, Toast, Dialog } from "vant";
import { data } from "@/utils/mock";
import HelloWorld from "@/components/HelloWorld";
// vue 里面不要用箭头函数，this访问有问题，一时没想起来，吃了大亏；
// 使用 es6 函数写法 ‘data() {}’ 等价于 es5 的写法 ‘data: function() {}’ 这两种都可以
export default {
  name: "Home",
  data() {
    return {
      aaaa: "df",
      mockData: data
    };
  },
  components: {
    helloWorld: HelloWorld,
    vanButton: Button
  },
  created() {
    console.log("输出mock模拟的数据");
    console.log(this.mockData);
  },
  methods: {
    toast(msg) {
      //console.log(this.aaaa);
      Toast(msg);
    },
    indicator(msg) {
      Toast(msg);
    },
    loading() {
      const clrLoading = Toast.loading({
        mask: true,
        duration: 0,
        message: "加载中..."
      });
      setTimeout(() => {
        clrLoading.clear();
      }, 3000);
    },
    confirm() {
      Dialog.confirm({
        title: "标题",
        message: "弹窗内容"
      })
        .then(() => {
          //console.log("你点击了确认");
        })
        .catch(() => {
          //console.log("你点击了取消");
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.ac {
  text-align: center;
}
h1 {
  font-size: 20px;
}
.page-button-group {
  display: flex;
  justify-content: center;
}
</style>
